<template>
  <div class="user-management-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          添加
        </el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          批量删除
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.keyword"
              clearable
              placeholder="合作方全称|简称"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      border
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column align="center" show-overflow-tooltip type="selection"/>
      <el-table-column align="center" label="序号" width="55">
        <template #default="{ $index }">
          {{ total - (queryForm.pageNo - 1) * queryForm.pageSize - $index }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="合作方名称"
        prop="label"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="合作方简称"
        prop="short_label"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="合作方地址"
        prop="address"
        show-overflow-tooltip
      >
        <template #default="{row}">
          <el-row v-for="(item,index) in row.address" :key="index">
            {{ item }}
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        show-overflow-tooltip
        width="200"
      >
        <template #default="{ row }">
          <el-button circle icon="el-icon-view" @click="handleShow(row)" type="success"/>
          <el-button circle icon="el-icon-edit" @click="handleEdit(row)" type="primary"/>
          <el-button circle icon="el-icon-delete" @click="handleDelete(row)" type="danger"/>
        </template>
      </el-table-column>
      <template #empty>
        <el-image
          class="vab-data-empty"
          :src="require('@/assets/empty_images/data_empty.png')"
        />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="edit" @fetch-data="fetchData"/>
  </div>
</template>

<script>
import {doDelete, getList, doEdit} from '@/api/business/customer'
import Edit from './components/customerEdit'
import {parseTime} from '@/utils/index'


export default {
  name: 'customer',
  components: {Edit},
  filters: {
    parseTime: parseTime,
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
      }
      return statusMap[status]
    },
    targetFilter(target) {
      const targetMap = {
        '_blank': '新页面打开',
        '_self': '当前页打开',
      }
      return targetMap[target]
    },
    readFilter(status) {
      const statusMap = {
        0: '禁用',
        1: '启用',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        username: '',
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    toView(row) {
      this.$router.push({path: '/finance/income', query: {customer_id: row.id}})
    },
    setSelectRows(val) {
      this.selectRows = val
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs['edit'].showEdit(row)
      } else {
        this.$refs['edit'].showEdit(null)
      }
    },
    handleShow(row) {
      this.$refs['edit'].viewEdit(row)
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const {msg} = await doDelete({ids: row.id})
          this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          await this.fetchData()
        })
      } else {
        if (this.selectRows.length > 0) {
          const ids = this.selectRows.map((item) => item.id).join()
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const {msg} = await doDelete({ids})
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            await this.fetchData()
          })
        } else {
          this.$baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
        }
      }
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val
      this.fetchData()
    },
    queryData() {
      this.queryForm.pageNo = 1
      this.fetchData()
    },
    async fetchData() {
      this.listLoading = true
      const {
        data: {list, total},
      } = await getList(this.queryForm)
      this.list = list
      this.total = total
      this.listLoading = false
    },
  },
}
</script>
